<template>
  <view class="simple-voice-input">
    <view class="input-container">
      <textarea 
        v-model="text"
        :placeholder="placeholder"
        class="text-input"
        :maxlength="maxLength"
        @input="onTextChange"
      />
      
      <button 
        class="voice-btn"
        :class="{ 'recording': isRecording, 'disabled': !isSupported }"
        @click="toggleRecording"
        :disabled="!isSupported"
      >
        <text class="voice-icon">{{ isRecording ? '⏹️' : '🎤' }}</text>
      </button>
    </view>
    
    <view class="status-bar" v-if="status">
      <text class="status-text" :class="statusType">{{ status }}</text>
    </view>
    
    <view class="controls" v-if="showControls">
      <picker 
        :value="languageIndex" 
        :range="languages" 
        range-key="name"
        @change="onLanguageChange"
        class="language-picker"
      >
        <view class="picker-display">{{ languages[languageIndex].name }}</view>
      </picker>
      
      <button class="clear-btn" @click="clearText" v-if="text">
        清空
      </button>
    </view>
  </view>
</template>

<script>
import { SpeechRecognitionManager } from '../utils/speechRecognition.js'

export default {
  name: 'SimpleVoiceInput',
  
  props: {
    // 输入框占位符
    placeholder: {
      type: String,
      default: '点击麦克风开始语音输入...'
    },
    // 最大字符长度
    maxLength: {
      type: Number,
      default: 1000
    },
    // 默认语言
    defaultLanguage: {
      type: String,
      default: 'zh-CN'
    },
    // 是否显示控制按钮
    showControls: {
      type: Boolean,
      default: true
    },
    // 是否连续识别
    continuous: {
      type: Boolean,
      default: true
    },
    // 初始文本
    value: {
      type: String,
      default: ''
    }
  },
  
  data() {
    return {
      text: this.value,
      isRecording: false,
      isSupported: false,
      status: '',
      statusType: '',
      
      speechManager: null,
      
      languageIndex: 0,
      languages: [
        { code: 'zh-CN', name: '中文' },
        { code: 'en-US', name: 'English' },
        { code: 'ja-JP', name: '日本語' },
        { code: 'ko-KR', name: '한국어' }
      ]
    }
  },
  
  computed: {
    currentLanguage() {
      return this.languages[this.languageIndex].code;
    }
  },
  
  watch: {
    value(newVal) {
      this.text = newVal;
    },
    
    text(newVal) {
      this.$emit('input', newVal);
      this.$emit('change', newVal);
    }
  },
  
  mounted() {
    this.initSpeechRecognition();
    this.setDefaultLanguage();
  },
  
  beforeDestroy() {
    if (this.speechManager) {
      this.speechManager.destroy();
    }
  },
  
  methods: {
    // 初始化语音识别
    initSpeechRecognition() {
      this.speechManager = new SpeechRecognitionManager({
        continuous: this.continuous,
        interimResults: true,
        lang: this.currentLanguage
      });
      
      this.isSupported = this.speechManager.isSupported;
      
      if (!this.isSupported) {
        this.setStatus('浏览器不支持语音识别', 'error');
        return;
      }
      
      // 绑定事件
      this.speechManager.on('start', () => {
        this.isRecording = true;
        this.setStatus('正在监听...', 'listening');
      });
      
      this.speechManager.on('end', () => {
        this.isRecording = false;
        this.setStatus('', '');
      });
      
      this.speechManager.on('result', (data) => {
        if (data.finalTranscript) {
          this.text += data.finalTranscript;
          this.$emit('transcript', data.finalTranscript);
        }
      });
      
      this.speechManager.on('error', (error) => {
        this.isRecording = false;
        this.setStatus(error.message, 'error');
      });
    },
    
    // 设置默认语言
    setDefaultLanguage() {
      const index = this.languages.findIndex(lang => lang.code === this.defaultLanguage);
      if (index !== -1) {
        this.languageIndex = index;
      }
    },
    
    // 切换录音状态
    toggleRecording() {
      if (!this.isSupported) return;
      
      if (this.isRecording) {
        this.speechManager.stop();
      } else {
        this.speechManager.start();
      }
    },
    
    // 文本变化处理
    onTextChange() {
      this.$emit('input', this.text);
    },
    
    // 清空文本
    clearText() {
      this.text = '';
      this.$emit('clear');
    },
    
    // 语言切换
    onLanguageChange(e) {
      this.languageIndex = e.detail.value;
      if (this.speechManager) {
        this.speechManager.setLanguage(this.currentLanguage);
      }
      this.$emit('language-change', this.currentLanguage);
    },
    
    // 设置状态
    setStatus(message, type) {
      this.status = message;
      this.statusType = type;
      
      if (message && type !== 'listening') {
        setTimeout(() => {
          this.status = '';
          this.statusType = '';
        }, 3000);
      }
    }
  }
}
</script>

<style scoped>
.simple-voice-input {
  width: 100%;
}

.input-container {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.text-input {
  flex: 1;
  min-height: 80px;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.text-input:focus {
  outline: none;
  border-color: #007bff;
}

.voice-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #007bff;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.voice-btn:hover:not(.disabled) {
  background: #0056b3;
  transform: scale(1.05);
}

.voice-btn.recording {
  background: #dc3545;
  animation: pulse 1.5s infinite;
}

.voice-btn.disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.voice-icon {
  font-size: 20px;
}

.status-bar {
  margin-top: 8px;
  text-align: center;
}

.status-text {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.status-text.listening {
  background: #d4edda;
  color: #155724;
}

.status-text.error {
  background: #f8d7da;
  color: #721c24;
}

.controls {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.language-picker {
  flex: 1;
}

.picker-display {
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.clear-btn {
  padding: 8px 16px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.clear-btn:hover {
  background: #545b62;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .input-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .voice-btn {
    align-self: center;
    margin-top: 10px;
  }
  
  .controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .clear-btn {
    margin-top: 8px;
  }
}
</style>